import React, {useState,} from 'react'
import {connect,} from 'react-redux'
import {Modal,} from "antd-mobile"
import '../OnLiveHeader.css'

import ShareIconFull from "../../../../../../res/images/web/live-room/onlive-share-icon.png"
import PrettyIcon from "../../../../../../res/images/web/live-room/pretty-icon.png"
import ZoomInIcon from "../../../../../../res/images/web/live-room/zoom-in-icon.png"
import PKIcon from "../../../../../../res/images/web/live-room/pk-icon.png"
import RankIcon from "../../../../../../res/images/web/live-room/fullscreen-rank-icon.png"

import SharePopup from "../../../../../game-room/components/Header/SharePopup/SharePopup"
import OnLiveHeaderFullScreenComments from "./Comments/Comments"
import OnLiveHeaderFullScreenFansRankList from "./FansRankList/FansRankList"
import OnLiveHeaderFullScreenPretty from "./Pretty/Pretty";
import OnLiveHeaderFullScreenPk from "./PK/Pk"

const OnLiveHeaderFullScreen = props => {

    const {
        VideoPlayer,
        liveDetail,
        userDetail,
    } = props

    const {
        IsStar,
    } = userDetail

    const [showRank, setShowRank] = useState(false)
    const [showPretty, setShowPretty] = useState(false)
    const [showPk, setShowPk] = useState(false)

    const offLive = () => {
        const Id = liveDetail.Id
        const cid = liveDetail.Cid
        // this.props.doStarOffline(payload)
        props.doDeleteLive({Id, cid,})
    }

    const confirmClose = async () => {
        const title = '是否关闭直播？'
        const cancel = {
            text: '取消',
            onPress: () => {},
        }
        const ok = {
            text: '关闭',
            onPress: () => offLive(),
            style: {
                color: '#FA7268'
            }
        }
        await Modal.alert(title, '', [
            cancel,
            ok,
        ])
        const modal = document.body.querySelector('.am-modal-wrap')
        modal.style.transform = 'rotate(90deg)'
    }

    const shareIconFull = (
        <div className='live-room-header-player-share-icon-full'>
            <img
                onClick={() => props.onShowShare()}
                src={ShareIconFull}
                alt=''
            />
        </div>
    )

    const prettyIcon = (
        <div className='live-room-header-player-pretty-icon-full'>
            <img
                onClick={() => setShowPretty(true)}
                src={PrettyIcon}
                alt=''
            />
        </div>
    )

    const ZoomInSizeIcon = (
        <div className='live-room-header-player-zoom-in-icon'>
            <img
                onClick={() => props.fullSize()}
                src={ZoomInIcon}
                alt=''
            />
        </div>
    )

    const networkDisplay = (
        <div
            className='live-room-header-player-full-network'
        >
            <div
                className='live-room-header-player-full-size-btn'
            >
                <span>150k/s</span>
            </div>
        </div>
    )

    const closeBtn = (
        <div
            className='live-room-header-player-full-close'
            onClick={() => confirmClose()}
        >
            <div
                className='live-room-header-player-full-size-btn'
            >
                <span style={{color: '#FA7268'}}>
                    关闭
                </span>
            </div>
        </div>
    )

    const pkIcon = (
        <div
            className='live-room-header-player-full-size-btn-icon'
            onClick={() => setShowPk(true)}
        >
            <span>
                加比分
            </span>
            <img alt='' src={PKIcon}/>
        </div>
    )

    const rankIcon = (
        <div
            className='live-room-header-player-full-size-btn-icon'
            onClick={() => setShowRank(true)}
        >
            <span>
                贡献
            </span>
            <img alt='' src={RankIcon}/>
        </div>
    )

    const w = window.innerWidth
    const h = window.innerHeight
    const fullContainerStyle = {
        height: w,
        width: h,
    }

    const fullVideoTemplate = (
        <div
            className='live-room-header-player-ctn-full-screen'
            style={fullContainerStyle}
        >
            {VideoPlayer}
            <SharePopup
                showSharePopup={props.showSharePopup}
                hideSharePopup={props.hideSharePopup}
                // fullScreen={this.state.fullScreen}
            />
            <div className='live-room-header-player-full-right-top'
            >
                {networkDisplay}
                {IsStar ? closeBtn : null}
                {ZoomInSizeIcon}
            </div>
            <div className='live-room-header-player-full-right-bottom'>
                {pkIcon}
                {rankIcon}
            </div>
            {shareIconFull}
            <OnLiveHeaderFullScreenComments/>
            {IsStar ? prettyIcon : null}
            {showRank ?
                <OnLiveHeaderFullScreenFansRankList
                    setShowRank={setShowRank}
                />
                : null
            }
            {showPretty ?
                <OnLiveHeaderFullScreenPretty
                    setShowPretty={setShowPretty}
                />
                : null
            }
            {showPk ?
                <OnLiveHeaderFullScreenPk
                    setShowPk={setShowPk}
                />
                : null
            }
        </div>
    )

    return fullVideoTemplate
}

const mapState = state => ({
    dialogues: state.chat.dialogues,
    userDetail: state.user.userdetail,
})

const mapDispatch = dispatch => ({
    doStarOffline: (payload) => dispatch.star.doStarOffline(payload),
    doDeleteLive: (payload) => dispatch.star.doDeleteLive(payload),
})

export default connect(mapState, mapDispatch)(OnLiveHeaderFullScreen)
